<template>
  <div class="package-warp" v-show="!isHideCart && hideCart">
    <div class="package" v-if="cartProduct" v-for="item in cartProduct">
      <div class="bd">
        <div class="thumb">
          <img :src="item.spec_image" >
        </div>
        <h2 class="title">选择类型</h2>
        <ul class="gift">
          <li class="item"
            v-for="(val, index) in item.spec"
            @click="selectPackageFn(index)"
            :class="{'active':index===selectPackage}">
            {{val.spec_name}}
          </li>
        </ul>
        <h2 class="title">选择数量</h2>
        <div class="cartcontrol-warp">
          <Cartcontrol if="cartProduct" :productData="item" :cartType="2" :hideDecrease="true" />
        </div>
      </div>
      <div class="ft">
        总数量: <span class="totalCount">{{totalCount}}</span>件&nbsp;&nbsp;&nbsp;&nbsp;总价格: <span class="totalPrice">{{totalPrice}}</span>元
      </div>
    </div>
    <div class="btn-reserve" :class="{'btn-gray':totalCount<=0}" @click="gotoPay" transition="fade">下一步</div>
    <div class="mask" @click="show"></div>
  </div>
</template>

<script>
import Cartcontrol from './cartcontrol'
export default {
  props: {
    cartProduct: {
      Object
    }
  },
  data() {
    return {
      isHideCart: true,
      specType: 0, // 当前选择的礼品
      selectPackage: 0
    }
  },
  computed: {
    totalPrice() {
      return this.cartProduct.reduce((total, item) => {
        return total + Number(item.price) * item.quantity
      }, 0)
    },
    totalCount() {
      return this.cartProduct.reduce((total, item) => {
        return total + item.quantity
      }, 0)
    },
    seletProductData() {
      let cartProduct = this.cartProduct[0] // 礼盒产品只有一个购物车
      let packageData = cartProduct.spec
      return {
        product_id: cartProduct.product_id,
        price: packageData[this.selectPackage].spec_price,
        product_name: cartProduct.product_name,
        spec: packageData || [],
        spec_name: packageData[this.selectPackage].spec_name || '',
        spec_image: cartProduct.spec_image || ''
      }
    },
    hideCart() {
      if (this.cartProduct.length) {
        return true
      } else {
        return false
      }
    }
  },
  methods: {
    show() {
      this.isHideCart = !this.isHideCart
    },
    selectPackageFn(index) {
      this.selectPackage = index
      this.$store.dispatch('selectPackage', this.seletProductData)
    },
    gotoPay() {
      if (this.totalCount > 0) {
        // 去结算的产品
        this.$router.push({path: '/gotopay', query: {type: 2}})
      }
    }
  },
  components: {
    Cartcontrol
  }
}
</script>

<style lang="scss">
  @import '../assets/styles/package';
</style>
